<!--
 * @Author: liz
 * @Date: 2023-12-19 14:40:57
 * @LastEditTime: 2024-02-02 13:41:55
 * @LastEditors: MoWanPing
 * @Description: 地图文件
 * @FilePath: \jnks_low_air_front_gov_online\src\views\airMonitor\cockpit\test.vue
-->
<template>
  <div id="map"></div>
  <div class="ImageryCongfig">
    <div class="imagery_con">
      <span class="c_title">饱和度(saturation)：{{ saturation }}</span>
      <el-slider
        v-model="saturation"
        :min="-5"
        :max="5"
        :step="0.01"
        @input="change_interfaceConfig('saturation')"
      />
      <span class="c_title">亮度(brightness)：{{ brightness }}</span>
      <el-slider
        v-model="brightness"
        :min="-10"
        :max="10"
        :step="0.01"
        @input="change_interfaceConfig('brightness')"
      />
      <span class="c_title">对比度(contrast)：{{ contrast }}</span>
      <el-slider
        v-model="contrast"
        :min="-10"
        :max="10"
        :step="0.01"
        @input="change_interfaceConfig('contrast')"
      />
      <span class="c_title">色调(hue)：{{ hue }}</span>
      <el-slider
        v-model="hue"
        :min="-2"
        :max="2"
        :step="0.01"
        @input="change_interfaceConfig('hue')"
      />
      <span class="c_title">伽马校正(gamma)：{{ gamma }}</span>
      <el-slider
        v-model="gamma"
        :min="-5"
        :max="5"
        :step="0.01"
        @input="change_interfaceConfig('gamma')"
      />
      <span class="c_title">是否反色：</span>
      <el-switch
        v-model="invertColor"
        @change="change_interfaceConfig('invertColor')"
      />
      <br />
      <span class="c_title">滤镜颜色：{{ color }}</span>
      <el-color-picker
        v-model="color"
        color-format="rgb"
        @active-change="change_interfaceConfig('color', $event)"
      />
      <hr />
      <span class="c_title">显示白膜：</span>
      <el-switch
        v-model="showBuildingModel"
        @change="change_interfaceConfig('buildingModel')"
      />
      <br />
      <template v-if="showBuildingModel">
        <span class="c_title">白膜颜色：{{ buildingColor }}</span>
        <el-color-picker
          v-model="buildingColor"
          color-format="rgb"
          @active-change="change_interfaceConfig('buildingColor', $event)"
        />
      </template>
      <br />
      <template v-if="showBuildingModel">
        <span class="c_title">白膜透明度：{{ buildingColorTransparency }}</span>
        <el-slider
          v-model="buildingColorTransparency"
          :min="0"
          :max="1"
          :step="0.01"
          @input="change_interfaceConfig('buildingColorTransparency')"
        />
      </template>
      <br />
      <!-- <hr />
      <span class="c_title">显示建筑模型：</span>
      <el-switch
          v-model="showArchitectureModel"
          @change="change_interfaceConfig('architectureModel')"
      /> -->
      <!-- <br /> -->
      <!-- <hr />
      <span class="c_title">显示道路流光：</span>
      <el-switch v-model="showtheWay" @change="change_interfaceConfig('way')" /> -->
      <!-- <el-button @click="save">保存当前配置</el-button> -->
    </div>
  </div>
</template>
<script name="toning" setup>
import { onMounted, ref, provide, onUnmounted } from "vue";
// import * as Cesium from "cesium";
import { TdtImageryProvider } from "@dvgis/cesium-map";
import CesiumNavigation from "cesium-navigation-es6";
// import '@/utils/CesiumNetworkPlug.min.js'
import modifyMap from "@/utils/filterColor.js"; // 地图调色
// import Spriteline1MaterialProperty from '@/utils/spriteline.js' // 材质 流光线
const isLoadAlarmState = ref(false);
provide("isLoadAlarmState", isLoadAlarmState);
let viewer = null; // 地图场景
// let handler = null // 监听点解事件
const utc = Cesium.JulianDate.fromDate(new Date("2021/07/04 05:00:00"));
const saturation = ref(-2.75);
const brightness = ref(-1.33);
const contrast = ref(2.16);
const hue = ref(-0.05);
const gamma = ref(-0.19);
const invertColor = ref(true);
const color = ref("rgb(1, 10, 20)"); // rgb(78,112,166)
const tmpColor = ref([1, 10, 20]);
const showBuildingModel = ref(false);
const buildingColor = ref("rgb(233, 241, 245)");
const buildingColorTransparency = ref(1);
let oldBuildColor = ref([233, 241, 245]);
const showArchitectureModel = ref(false);
const showtheWay = ref(false);
let modelThree = {
  bulid: [],
  road: [],
  model: [],
  point: [],
}; // 三维模型
/**
 * @description: 地图初始化
 */
const initMap = () => {
  if (viewer) {
    viewer.entities.removeAll(); // 移除全部
    viewer.dataSources.removeAll(); // 移除全部
    viewer.scene.primitives.removeAll(); // 移除全部
    viewer.destroy();
    // viewer = null
  }
  // // 添加 IndexDB 缓存规则
  // const OfflineCacheController = CesiumNetworkPlug.OfflineCacheController
  // // ① 全局缓存
  // OfflineCacheController.ruleList.add('*')

  // viewer = new Cesium.Viewer("map", {
  //   homeButton: false,
  //   sceneModePicker: false,
  //   baseLayerPicker: false, // 影像切换
  //   animation: false, // 是否显示动画控件
  //   infoBox: false, // 是否显示点击要素之后显示的信息
  //   selectionIndicator: false, // 要素选中框
  //   geocoder: false, // 是否显示地名查找控件
  //   timeline: true, // 必须为true显示时间线组件（如不想显示可以使用样式层叠表修改display：none） 否则viewer.timeline.zoomTo会报undefined错误
  //   fullscreenButton: false,
  //   navigationHelpButton: false, // 是否显示帮助信息控件
  //   shouldAnimate: true, // 必须为true开启动画 否则不会达到飞机模型飞行动画效果
  // });

  viewer = new Cesium.Viewer("map");
  viewer.scene.globe.showGroundAtmosphere = false;
  let instance = daas.useCesium(viewer);
  window.viewer = viewer;
  setTimeout(() => {
    load3D();
  }, 1000);
  viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString(
    "rgba(49, 108, 140, 0.8)"
  ); //设置地球颜色
  viewer.scene.skyAtmosphere.show = false; // 隐藏大气，不隐藏的话周围会有一圈光晕
  viewer._cesiumWidget._creditContainer.style.display = "none"; // 去除logo
  viewer.imageryLayers.removeAll(true); // 移除所有图层并销毁
  viewer.scene.debugShowFramesPerSecond = true; // 显示帧速(FPS)
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
  );
  /* 抗锯齿 */
  viewer.scene.msaaSamples = 2;

  // let options = {
  //  style: 'vec', //style: vec、cva、img、cia、ter
  //  key: '1f276f43182a6b64efd0e5f5e81afe1e' // 需去相关地图厂商申请
  // }
  //viewer.imageryLayers.add(new Cesium.ImageryLayer(new TdtImageryProvider(options)))

  //let options2 = {
  //    style: 'cva', //style: vec、cva、img、cia、ter
  //    key: '1f276f43182a6b64efd0e5f5e81afe1e' // 需去相关地图厂商申请
  //}
  //viewer.imageryLayers.add(new Cesium.ImageryLayer(new TdtImageryProvider(options2)))

  // let options = {
  //   style: 'vec', //style: vec、cva、img、cia、ter
  //   key: '5eaf1a6bb18dd7f1fad17aa7401f417c' // 需去相关地图厂商申请
  // }
  // viewer.imageryLayers.add(new Cesium.ImageryLayer(new TdtImageryProvider(options)))
  //
  // let options2 = {
  //   style: 'cva', //style: vec、cva、img、cia、ter
  //   key: '5eaf1a6bb18dd7f1fad17aa7401f417c' // 需去相关地图厂商申请
  // }
  // viewer.imageryLayers.add(new Cesium.ImageryLayer(new TdtImageryProvider(options2)))

  // var amapProvider = new Cesium.UrlTemplateImageryProvider({
  //   url: "https://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8",
  //   credit: "Map data © AutoNavi",
  //   minimumLevel: 4,
  //   maximumLevel: 18,
  // });

  // // 将高德地图的ImageryProvider添加到Viewer中
  // viewer.imageryLayers.addImageryProvider(amapProvider);
  let vecLayer = instance.addLayer({
    name: "矢量图",
    index: 2,
    subdomains: "123",
    baseUrl: "https://tiles{s}.geovisearth.com/base/v1/vec/{z}/{x}/{y}",
    tmsIds: "w",
    format: "png",
    token: "c76ac4c583c53ae3574e44bf282c4956e14297d054aae7b4f219ec22fbe2350e",
    minimumLevel: 0,
    maximumLevel: 18,
  });
  vecLayer.show = true;

  let navigationOption = {
    // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和Cesium.Rectangle.
    defaultResetView: new Cesium.Cartographic.fromDegrees(
      120.14505285080335,
      30.23604447781826,
      1888.3516077279057
    ),
    orientation: {
      // 初始视角
      heading: 0.12495431337955587,
      pitch: -0.48453083956680976,
      roll: 0.000038988918801941,
    },
    // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
    enableCompass: true,
    // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件 将不会添加到地图中。
    enableZoomControls: true,
    // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
    enableDistanceLegend: true,
    // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
    enableCompassOuterRing: true,
  };
  new CesiumNavigation(viewer, navigationOption);

  /* 启用场景照明 */
  viewer.scene.globe.enableLighting = true;
  viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(
    utc,
    8,
    new Cesium.JulianDate()
  );
  /* 地图调色 */
  modifyMap(
    viewer,
    {
      invertColor: invertColor.value, //反色
      filterRGB:
        tmpColor.value.length > 0
          ? [tmpColor.value[0], tmpColor.value[1], tmpColor.value[2]]
          : [], //过滤器rgb
      brightness: Number(brightness.value), //亮度，值0=1，小于1会减少亮度，大于1会增加亮度
      contrast: Number(contrast.value), //对比度，值0=1，小于1会减少对比度、亮度，大于1会增加对比度、亮度
      gamma: Number(gamma.value), //值0=1，小于1会增加对比度，大于1会减少对比度
      hue: Number(hue.value), //颜色，值能为0，可以为正负数，接近0为原始颜色，改变饱和度，轻微改变色相
      saturation: Number(saturation.value), //饱和度+色相，值不能为0，可以为正负数，接近0为原始颜色，值距离0越远，饱和度越高，并改变色相
    },
    0,
    false
  );
  // modifyMap(
  //     viewer,
  //     {
  //         invertColor: true, //反色
  //         filterRGB: [119, 146, 149], //过滤器rgb
  //         brightness: 0.55, //亮度，值0=1，小于1会减少亮度，大于1会增加亮度
  //         contrast: 1.5, //对比度，值0=1，小于1会减少对比度、亮度，大于1会增加对比度、亮度
  //         gamma: 0.1, //值0=1，小于1会增加对比度，大于1会减少对比度
  //         hue: 0, //颜色，值能为0，可以为正负数，接近0为原始颜色，改变饱和度，轻微改变色相
  //         saturation: 0.1 //饱和度+色相，值不能为0，可以为正负数，接近0为原始颜色，值距离0越远，饱和度越高，并改变色相
  //     },
  //     0,
  //     false
  // )
  // modifyMap(
  //     viewer,
  //     {
  //         invertColor: false,
  //         filterRGB: [], //过滤器rgb
  //         brightness: 0.55, //亮度，值0=1，小于1会减少亮度，大于1会增加亮度
  //         contrast: 1.5, //对比度，值0=1，小于1会减少对比度、亮度，大于1会增加对比度、亮度
  //         gamma: 0.1, //值0=1，小于1会增加对比度，大于1会减少对比度
  //         hue: 0, //颜色，值能为0，可以为正负数，接近0为原始颜色，改变饱和度，轻微改变色相
  //         saturation: 0.1 //饱和度+色相，值不能为0，可以为正负数，接近0为原始颜色，值距离0越远，饱和度越高，并改变色相
  //     },
  //     1,
  //     false
  // )

  viewer.camera.setView({
    // 设置相机位置
    destination: {
      x: -2770465.5740483203,
      y: 4770654.1649007285,
      z: 3193958.5468018143,
    },
    duration: 1, // 设置飞行动画的持续时间（单位：秒）
    orientation: {
      // 初始视角
      heading: 0.12495431337955587,
      pitch: -0.48453083956680976,
      roll: 0.000038988918801941,
    },
  });
};
/**
 * @description: 3维效果
 */
const load3D = async () => {
  /* 加载场馆模型 */
  // try {
  //   let url = '/3dTiles/architecture/hangzhou/tileset.json'
  //   const tileset = await Cesium.Cesium3DTileset.fromUrl(url)
  //   tileset.show = showArchitectureModel.value
  //   viewer.scene.primitives.add(tileset)
  //   modelThree.model.push(tileset)
  //   // 初始偏移参数
  //   // 平移参数
  //   const tx = 150
  //   const ty = 250
  //   const tz = -20
  //   // 旋转参数
  //   const rx = 0
  //   const ry = 0
  //   const rz = 25
  //   // 初始比例
  //   const scale = 1.06
  //   // 局部坐标系
  //   let scaleFrame
  //   // 比例四元数
  //   // let scaleMatrix4
  //   // 设置瓦片加载完成监听事件
  //   tileset.initialTilesLoaded.addEventListener(function () {
  //     // 获取倾斜摄影中心点
  //     const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
  //     const surface = Cesium.Cartesian3.fromRadians(
  //         cartographic.longitude,
  //         cartographic.latitude,
  //         cartographic.height
  //     )
  //     // 记录局部坐标系
  //     scaleFrame = Cesium.Transforms.eastNorthUpToFixedFrame(surface)
  //     //平移
  //     const _tx = tx ? tx : 0
  //     const _ty = ty ? ty : 0
  //     const _tz = tz ? tz : 0
  //     const tempTranslation = new Cesium.Cartesian3(_tx, _ty, _tz)
  //     const offset = Cesium.Matrix4.multiplyByPoint(
  //         scaleFrame,
  //         tempTranslation,
  //         new Cesium.Cartesian3(0, 0, 0)
  //     )
  //     const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
  //     tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
  //     //旋转
  //     if (rx) {
  //       const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rx))
  //       const rotate = Cesium.Matrix4.fromRotationTranslation(mx)
  //       Cesium.Matrix4.multiply(scaleFrame, rotate, scaleFrame)
  //     }
  //     if (ry) {
  //       const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(ry))
  //       const rotate = Cesium.Matrix4.fromRotationTranslation(my)
  //       Cesium.Matrix4.multiply(scaleFrame, rotate, scaleFrame)
  //     }
  //     if (rz) {
  //       const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rz))
  //       const rotate = Cesium.Matrix4.fromRotationTranslation(mz)
  //       Cesium.Matrix4.multiply(scaleFrame, rotate, scaleFrame)
  //     }
  //     // 缩放
  //     if (scale) {
  //       const _scale = Cesium.Matrix4.fromUniformScale(scale)
  //       // 记录比例四元数
  //       // scaleMatrix4 = _scale.clone()
  //       Cesium.Matrix4.multiply(scaleFrame, _scale, scaleFrame)
  //     }
  //     tileset._root.transform = scaleFrame
  //   })
  // } catch (error) {
  //   console.error(`Error creating tileset: ${error}`)
  // }
  /* 加载道路流光 */
  // let streamerTextureUrl = import.meta.env.VITE_MODEL_URL + '/3dTiles/way/spriteline2.png'
  // let roadUrl = import.meta.env.VITE_MODEL_URL + '/3dTiles/way/province_government_way.geojson'
  // Cesium.GeoJsonDataSource.load(roadUrl, {
  //     stroke: Cesium.Color.fromCssColorString('rgba(86, 217, 193, 0.8)'),
  //     strokeWidth: 3,
  //     clampToGround: true
  // }).then(function (dataSource) {
  //     dataSource.show = showtheWay.value
  //     viewer.dataSources.add(dataSource)
  //     const entities = dataSource.entities.values
  //     modelThree.road.push(dataSource)

  //     /* 道路流光 */
  //     for (let i = 0; i < entities.length; i++) {
  //         let entity = entities[i]
  //         entity.polyline.width = 2
  //         entity.polyline.material = new Spriteline1MaterialProperty(2000, streamerTextureUrl)
  //     }
  // })
  /* 加载建筑模型 */
  try {
    let url = "/3dTiles/architecture/hangzhou/tileset.json";
    const tileset = await Cesium.Cesium3DTileset.fromUrl(url);
    viewer.scene.primitives.add(tileset);
    /* 设置颜色 */
    tileset.style = new Cesium.Cesium3DTileStyle({
      color: {
        // conditions: [["true", "color('rgb(51, 153, 255)',1)"]],
        // conditions: [["true", "color('rgb(41, 173, 177)',1)"]],
        conditions: [
          // ["true", "color('rgb(23, 78, 101)',1)"]
          // ["true", "color('rgb(65, 155, 204)',1)"]
          // ["true", "color('rgb(4, 68, 89)',1)"]
          ["true", "color('rgb(233, 241, 245)',1)"],
        ],
      },
    });
    var customShader = new Cesium.CustomShader({
      lightingModel: Cesium.LightingModel.UNLIT,
      fragmentShaderText: `
                       void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
                           float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
                           float _heightRange = 60.0; // 高亮的范围(_baseHeight ~ _baseHeight + _      heightRange) 默认是 0-60米
                           float _glowRange = 300.0; // 光环的移动范围(高度)
                           float vtxf_height = fsInput.attributes.positionMC.z-_baseHeight;
                           float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
                           float vtxf_a12 = vtxf_height / _heightRange + sin(vtxf_a11) * 0.1;
                           material.diffuse*= vec3(vtxf_a12, vtxf_a12, vtxf_a12);
                           float vtxf_a13 = fract(czm_frameNumber / 360.0);
                           float vtxf_h = clamp(vtxf_height / _glowRange, 0.0, 1.0);
                           vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0;
                           float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13));
                           material.diffuse += material.diffuse * (1.0 - vtxf_diff);
                       }
                       `,
    });
    tileset.customShader = customShader;
    modelThree.bulid.push(tileset);
  } catch (error) {
    console.error(`Error creating tileset: ${error}`);
  }

  /* 加载植株模型 */
  // try {
  //   let url = '/3dTiles/architecture/grass/tileset.json'
  //   const tileset = await Cesium.Cesium3DTileset.fromUrl(url)
  //   viewer.scene.primitives.add(tileset)
  //   /* 设置颜色 */
  //   tileset.style = new Cesium.Cesium3DTileStyle({
  //     color: {
  //       conditions: [['true', "color('#1b703f',0.7)"]]
  //     }
  //   })
  //   modelThree.bulid.push(tileset)
  // } catch (error) {
  //   console.error(`Error creating tileset: ${error}`)
  // }

  /* 加载水系模型 */
  // try {
  //   let url = '/3dTiles/architecture/water/tileset.json'
  //   const tileset = await Cesium.Cesium3DTileset.fromUrl(url)
  //   viewer.scene.primitives.add(tileset)
  //   /* 设置颜色 */
  //   tileset.style = new Cesium.Cesium3DTileStyle({
  //     color: {
  //       conditions: [['true', "color('#00aeff',0.7)"]]
  //     }
  //   })
  //   modelThree.bulid.push(tileset)
  // } catch (error) {
  //   console.error(`Error creating tileset: ${error}`)
  // }
  // try {
  //     let url = import.meta.env.VITE_MODEL_URL + '/3dTiles/architecture/grass/tileset.json'
  //     const tileset = await Cesium.Cesium3DTileset.fromUrl(url)
  //     viewer.scene.primitives.add(tileset)
  //     /* 设置颜色 */
  //     tileset.style = new Cesium.Cesium3DTileStyle({
  //         color: {
  //             conditions: [['true', "color('rgb(105, 255, 105)',0.7)"]]
  //         }
  //     })

  //     modelThree.bulid.push(tileset)
  // } catch (error) {
  //     console.error(`Error creating tileset: ${error}`)
  // }
  // try {
  //     let url = import.meta.env.VITE_MODEL_URL + '/3dTiles/architecture/water/tileset.json'
  //     const tileset = await Cesium.Cesium3DTileset.fromUrl(url)
  //     viewer.scene.primitives.add(tileset)
  //     /* 设置颜色 */
  //     tileset.style = new Cesium.Cesium3DTileStyle({
  //         color: {
  //             conditions: [['true', "color('rgb(0, 0, 255)',0.7)"]]
  //         }
  //     })

  //     modelThree.bulid.push(tileset)
  // } catch (error) {
  //     console.error(`Error creating tileset: ${error}`)
  // }
};
const change_interfaceConfig = (type, Tcolor = "") => {
  const baseLayer = viewer.imageryLayers.get(0);
  let buildingColor = null;
  let str = "";
  let buildColor = "";
  try {
    switch (type) {
      case "saturation":
        baseLayer[type] = saturation.value;
        break;
      case "brightness":
        baseLayer[type] = brightness.value;
        break;
      case "contrast":
        baseLayer[type] = contrast.value;
        break;
      case "hue":
        baseLayer[type] = hue.value;
        break;
      case "gamma":
        baseLayer[type] = gamma.value;
        break;
      case "invertColor":
        // baseLayer[type] = invertColor.value ? 1 : 0
        break;
      case "color":
        tmpColor.value = new Cesium.Color.fromCssColorString(Tcolor).toBytes();
        if (modelThree.bulid.length > 0) {
          modelThree.bulid.forEach((item) => {
            viewer.scene.primitives.remove(item);
          });
        }
        if (modelThree.road.length > 0) {
          modelThree.road.forEach((item) => {
            viewer.dataSources.remove(item);
          });
        }
        if (modelThree.model.length > 0) {
          modelThree.model.forEach((item) => {
            viewer.scene.primitives.remove(item);
          });
        }
        if (modelThree.point.length > 0) {
          modelThree.point.forEach((item) => {
            viewer.entities.remove(item);
          });
        }
        modelThree = {
          bulid: [],
          road: [],
          model: [],
          point: [],
        }; // 三维模型
        setTimeout(() => {
          initMap();
        }, 1000);
        break;
      case "buildingModel":
        modelThree.bulid[0].show = showBuildingModel.value;
        break;
      case "buildingColor":
        buildingColor = new Cesium.Color.fromCssColorString(Tcolor).toBytes();
        oldBuildColor.value = [
          buildingColor[0],
          buildingColor[1],
          buildingColor[2],
        ];
        buildColor = `rgb(${buildingColor[0]},${buildingColor[1]},${buildingColor[2]})`;
        str = `color('${buildColor}',${buildingColorTransparency.value})`;
        modelThree.bulid[0].style = new Cesium.Cesium3DTileStyle({
          color: {
            conditions: [["true", str]],
          },
        });
        break;

      case "buildingColorTransparency":
        buildColor = `rgb(${oldBuildColor.value[0]},${oldBuildColor.value[1]},${oldBuildColor.value[2]})`;
        str = `color('${buildColor}',${buildingColorTransparency.value})`;
        modelThree.bulid[0].style = new Cesium.Cesium3DTileStyle({
          color: {
            conditions: [["true", str]],
          },
        });
        break;
      case "architectureModel":
        modelThree.model[0].show = showArchitectureModel.value;
        // baseLayer[type] = invertColor.value ? 1 : 0
        break;
      case "way":
        modelThree.road[0].show = showtheWay.value;
        // baseLayer[type] = invertColor.value ? 1 : 0
        break;
      default:
    }
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  initMap();
});
onUnmounted(() => {
  if (modelThree.bulid.length > 0) {
    modelThree.bulid.forEach((item) => {
      viewer.scene.primitives.remove(item);
    });
  }
  if (modelThree.road.length > 0) {
    modelThree.road.forEach((item) => {
      viewer.dataSources.remove(item);
    });
  }
  if (modelThree.model.length > 0) {
    modelThree.model.forEach((item) => {
      viewer.scene.primitives.remove(item);
    });
  }
  if (modelThree.point.length > 0) {
    modelThree.point.forEach((item) => {
      viewer.entities.remove(item);
    });
  }
  try {
    // handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
    if (viewer) {
      viewer.entities.removeAll(); // 移除全部
      viewer.dataSources.removeAll(); // 移除全部
      viewer.scene.primitives.removeAll(); // 移除全部
      // viewer.destroy()
      // viewer = null
    }
  } catch (e) {
    console.log(e);
  }
});
</script>

<style lang="scss" scoped>
// 地图
#map {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.ImageryCongfig {
  width: 20vw;
  position: absolute;
  top: 11%;
  left: 8%;
  padding: 10px 20px;
  background-color: rgb(29, 23, 23);
  border-radius: 4px;
  .imagery_con {
    margin-top: 10px;
    text-align: left;
    .c_title {
      color: white;
      font-size: 0.8em;
    }
  }
}
</style>
<style lang="scss">
.cesium-performanceDisplay-defaultContainer {
  top: 50%;
  right: 1%;
}
.compass {
  z-index: 99;
  right: 5px;
}
.navigation-controls {
  right: 35px;
  background: rgba(0, 36, 50, 0.4);
  z-index: 99;
}
.distance-legend {
  display: none;
}
.dialog-box {
  background-color: #012540;
  .el-dialog__title {
    color: #fff;
  }
  .form-dingding-box {
    width: 90%;
    .el-form-item__label {
      color: #fff;
    }
    .ipt {
      .el-input__inner,
      .el-textarea__inner {
        box-shadow: 0 0 0 1px rgba(4, 207, 211, 1) inset;
        background: transparent;
        color: #fff;
        border-radius: 5px;
        padding: 1px 10px;
      }
      .el-input__wrapper {
        padding: 0;
      }
    }
    .el-input.is-disabled .el-input__wrapper {
      background-color: transparent;
    }
  }
  .dialog-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    .btn {
      width: 100px;
      height: 30px;
      background: url("/img/bg-btn-1.png") no-repeat center;
      background-size: 100% 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      color: #fff;
      cursor: pointer;
    }
  }
}
/* cesium 时间轴 */
.cesium-viewer-timelineContainer {
  display: none;
}
</style>
